<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>p45_自定义指令_函数式</title>
		<!--
			需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		 -->
		<!-- 
			指令有两种情况不带前缀 v-
				1.代码你写错了，vue报错，不带v-;
				2.定义指令是不要带前缀v-，比如直接叫big,用的时候加上,如 v-big。
		 -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>{{name}}</h1>
			<h1>当前的n值：<span v-text="n"></span></h1>
			<h1>扩大10倍：<span v-big="n"></span></h1>
			<button @click="n++">点我++</button>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				n: 1,
				name: "尚硅谷"
			},
			/* 跟计算属性，监视属性，过滤一样都是通过配置项定义的 */
			directives: {
				/* big的值有2种情况：
					1. 是配置对象，对象里继续配置k-v，这种写起来麻烦，但可以处理细节问题；
					2. big值直接写为函数；这种写起来简单，但不可以处理细节问题；
				 */
				/* 
					1. big: {
						k:v,
						k:v
					}
				 */
				/**
				 * 这种函数有2个参数比较常用。这个指令不是靠big的返回值，而是靠的big里面的参数。
				 * element 是真实的DOM, 	console.dir(element)就可以看出。
				 * big函数何时会被调用? 
				 * 		1.指令与元素成功绑定时。
				 * 		2.指令所在的模板被重新解析时（指令所用到的数据发生更新时,这个说法不准确，）。
				 */
				big(element, binding) {
					element.innerText = binding.value * 10
				}
			}
		})
	</script>
</html>